<template>
    <div>
        <h1>姓名：{{ name }}</h1>
        <br>
        <h1>
            年龄：{{ age.num }}
        </h1>
        <br>
        <button @click="age.num++">点击shallowReactive处理age.num的数据</button>
        <button @click="name+='9'">点击shallowReactive处理name的数据</button>
    </div>
</template>

<script lang="ts">

import {shallowReactive, shallowRef, toRefs} from 'vue'

export default {
    setup() {
        // shallowReactive  只处理第一层数据!
        const p1 = shallowReactive({
            name: 'tom', // 第一层
            age: { // 第二层
                num: 10,
                str: '123'
            }
        })

        // shallowRef 只处理基本类型数据
        const p2 = shallowRef(0)

        return {...toRefs(p1), p2}

    }
}
</script>